<!--收费导入页面-->
<template>
  <div>
    <el-dialog
      title="批量导入"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :close="handleClose">

        <el-row>
          <el-col :span="24">
            <span style="font-weight: bold;">1</span> 请选择文件导入
          </el-col>
          <el-col :span="24">
            <div class="pad-20">
              <!-- <upload ref="uploadfile"></upload> -->
              <el-upload
                class="upload-demo"
                :action="uploadUrl"
                :limit="1"
                accept=".xlsx, .xls"
                :on-change="handleChange"
                :on-exceed="handleExceed"
                :on-success="success"
                :headers="headers"
                :file-list="fileList">

                <el-button size="small" type="primary">点击上传</el-button>

                <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入一个“xls”或“xlsx”格式文件！</div>
              </el-upload>
            </div>
          </el-col>
          <!-- <el-col :span="24">
            <span style="font-weight: bold;">3</span> 导入结果
          </el-col> -->
        </el-row>
        <div  style="margin-top: 5px;margin-left: 5px">
<!--        <el-button size="small" type="primary" @click="accomplish"> 提 交 </el-button>-->
          <el-link type="primary" @click="downloadModule" style="margin-left: 5px;color: #00BCD4">
            <font color="#6495ed">下载收费模板</font> </el-link>

        </div>

      <el-divider></el-divider>
      <el-form ref="form"  label-width="80px" v-show="importResult">
      <el-row>
        <el-col :span="22">
          <el-form-item label="导入结果" >
          <el-input v-model="importResult" type="textarea" placeholder="导入成功" autosize="{ minRows: 5, maxRows: 5}"/>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>

      <div class="flex-center" style="margin-top: 5px">
        <el-button size="small" @click="handleClose">关  闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import {getToken} from "@/utils/auth";

export default {
  name: 'import',
  props:{
    dialogVisible:{
      default:false
    },

  },
  data() {
    return {
      url: '/development/importBatchFill',
      fillResultData:[],
      fileList : [],
      uploadUrl: process.env.VUE_APP_BASE_API + '/jd/city/importBatchFill',
      radio:'全部',
      type:null,
      statusOptions: [{key:'成功',value:1},{key:'失败',value: 2}],
      importResult:null,//导入结果

      headers: {
        Authorization: "Bearer " + getToken(),
      },
    }
  },
  methods:{

    /** 文件变化操作 */
    handleChange(file, fileList){
      this.fileList=fileList;
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('development/exportFillTemplate', {
        ...null
      }, `投资者职业类别数据规范模板.xlsx`)
    },
    // 点击完成导入文件
    accomplish(){
      const loading = this.$loading({
        lock: true,
        text: '上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      if(this.fileList.length>0){
        var formData = new FormData();

        formData.append("file",this.fileList[0].raw);
        importBatchFill(formData).then(res=>{
          // console.log('====',res)
          loading.close();
          if(res.code===200){
            loading.close();
            this.$message.success("导入成功")
            this.$emit('getList')
          }

          //loading.close();
        }).catch((reason)=>{
          console.log(reason);
          console.log("ok");
          loading.close();
          if (res.code == 200) {
            this.importResult = res.data;
            console.log( this.importResult)
          }
          this.$emit('getList');
        })
      }else{
        loading.close();
        this.fileList = [];
        this.$message('请导入文件');
      }
    },

    // 点击关闭与取消
    handleClose(){
      this.importResult=null
      this.fileList = [];
      this.$emit('close')
    },

    /*********************下载模板 ********************/
    downloadModule(){
      this.download('xgt/chargeRegister/export',{},  `收费登记-批量导入模板.xlsx`)
    },


    /**********************************文件上传***********************************************/


    success(res,file,fileList) {
      if(res.code===200){

        this.$message.success("导入成功")
        this.$emit('getList');
        //移出当前文件对象
        fileList.splice(this.fileList.length-1,1);

      } else if (res.code===500) {
        this.$message.error(res.msg);
        let result = res.data
        this.importResult = result.join("\n");
        let index = 0;
        //移出当前文件对象
        fileList.splice(this.fileList.length-1,1);

      }


    },

    handleExceed(files, fileList) {
      this.$message.warning('只能上传一个文件')
    },



  }
}
</script>

<style scoped>

</style>
